<template>
  <div class="noticeList">
    <van-nav-bar title="通知记录" left-text="返回" left-arrow @click-left="router.back()"></van-nav-bar>
    <van-tabs v-model:active="queryType" color="#1989fa" line-width="30px" line-height="3px">
      <van-tab title="全部通知" name="all" />
      <van-tab title="缺药通知" name="low" />
      <van-tab title="吃药通知" name="medicine" />
    </van-tabs>
    <div class="content-list">
      <van-pull-refresh v-model="listRefreshing" @refresh="onRefresh" height="100%">
        <van-list v-model:loading="listLoading" finished-text="没有更多了" :finished="true" >
          <div class="notice-item" v-for="item in noticeList" :key="item.id">
            <div class="notice-item-left">
              <div class="notice-item-left-icon">
                <van-icon name="bell" size="20" color="#1989fa" />
              </div>
              <div class="notice-item-content">
                <div class="notice-item-content-title">
                  <van-tag v-if="item.type === 'low'" type="danger">缺药</van-tag>
                  <van-tag v-else type="primary">吃药</van-tag>
                  <span style="font-weight: bold;">{{ item.name }}</span>
                  <van-tag v-if="item.isRead" type="success">已读</van-tag>
                  <van-tag v-else type="danger">未读</van-tag>
                </div>
                <div class="notice-item-content-desc">{{ item.content }}</div>
                <div class="notice-item-bottom">
                  <div class="notice-item-content-time">{{ item.time }}</div>
                  <div class="notice-item-content-btn">
                    <!-- 链接样式 -->
                    <van-button size="small">已读</van-button>
                    <van-button type="primary" size="small">详情</van-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const queryType = ref('all')

// 通知列表
const noticeList = ref([
  { id:1, type: 'low', name: 'htfc786', content: '缺药通知缺药通知缺药通知缺药通知缺药通知缺药通知缺药通知缺药通知缺药通知缺药通知缺药通知缺药通知缺药通知缺药通知缺药通知缺药通知缺药通知', time: '2022-01-01 12:00:00', isRead: false },
])

const listLoading = ref(false);
const listRefreshing = ref(false);
const onRefresh = () => {
  listLoading.value = true;
  console.log("freshing...");
  
  setTimeout(() => {
    listRefreshing.value = false;
    listLoading.value = false;
  }, 1000);
};

</script>

<style scoped>
.noticeList {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.notice-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
  width: 100%;
}

.notice-item-left {
  display: flex;
  align-items: center;
  width: 100%;
}

.notice-item-icon {
  margin-right: 10px;
}
.notice-item-content {
  width: 100%;
}
.notice-item-content-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}
.notice-item-content-title * {
  margin-right: 5px;
}
.notice-item-content-desc {
  margin: 2px 5px;
}
.notice-item-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 30px;
}
.notice-item-content-time {
  font-size: 12px;
  color: #999;
}
.notice-item-content-btn {
  margin-left: 10px;
}
.notice-item-content-btn button {
  margin-left: 10px;
}
.notice-item-content {
  display: flex;
  flex-direction: column;
}
</style>